/**
 * 功能视图组件 - 使用子组件
 */
const FeatureView = {
    name: 'FeatureView',
    components: {
        EmptyStateView,
        ChatView,
        GenerateImageView,
        GenerateVideoView,
        TextToSpeechView,
        SettingsView
    },
    props: {
        currentFeature: {
            type: String,
            default: null
        },
        loading: {
            type: Boolean,
            default: false
        },
        result: {
            type: [String, Object],
            default: null
        },
        error: {
            type: String,
            default: null
        },
        messages: {
            type: Array,
            default: () => []
        },
        settings: {
            type: Object,
            default: () => ({})
        }
    },
    emits: [
        'send-message',
        'clear-conversation',
        'toggle-pause',
        'stop-stream',
        'update-settings'
    ],
    template: `
        <div style="flex: 1; padding: 0; overflow-y: auto; background-color: #f0f2f5;">
            <!-- 空状态 -->
            <empty-state-view v-if="!currentFeature"></empty-state-view>

            <!-- 智能对话 -->
            <chat-view
                v-else-if="currentFeature === 'chat'"
                :loading="loading"
                :messages="messages"
                :settings="settings.chat || {}"
                @send-message="$emit('send-message', $event)"
                @clear-conversation="$emit('clear-conversation', $event)"
                @stop-stream="$emit('stop-stream')"
            ></chat-view>

            <!-- 生成图片 -->
            <generate-image-view
                v-else-if="currentFeature === 'generate-image'"
                :settings="settings.image || {}"
            ></generate-image-view>

            <!-- 生成视频 -->
            <generate-video-view
                v-else-if="currentFeature === 'generate-video'"
                :settings="settings.video || {}"
            ></generate-video-view>

            <!-- 文字转语音 -->
            <text-to-speech-view
                v-else-if="currentFeature === 'text-to-speech'"
                :settings="settings.tts || {}"
            ></text-to-speech-view>

            <!-- 设置页面 -->
            <settings-view
                v-else-if="currentFeature === 'settings'"
                @settings-updated="$emit('update-settings', 'all', $event)"
            ></settings-view>

            <!-- 错误提示 -->
            <el-alert
                v-if="error"
                :title="error"
                type="error"
                :closable="true"
                show-icon
                style="margin: 20px;"
            ></el-alert>
        </div>
    `
};
